<template>
	<view class="content">
		<navBar></navBar>
		<view class="banner_pinpai">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item, key) in ad['2']" :key="key">
					<view class="swiper-item banner" @tap="go(item.target)">
						<image :src="item.thumb" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="pingpai">
				<view class="title">品牌馆</view>
				<swiper :indicator-dots="true" class="pingpai_wiper" :duration="1000">
					<swiper-item v-for="(item, key) in shop" :key="key">
						<view class="swiper-item banner_pinpai">
							<view class="image" v-for="(val, index) in item" :key="index">
								<image :src="val.logo" mode="widthFix"></image>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<block v-if="ad['3']">
			<view class="adv" v-for="(item, key) in ad['3']" :key="key" @tap="go(item.target)">
				<image :src="item.thumb" mode="widthFix"></image>
			</view>
		</block>
		<view class="pannel">
			<view class="mokuai_header">
				<view class="cateContainer">
					<scroll-view class="scrollView" scroll-with-animation scroll-x>
						<view v-for="(item, index) in property_category" :key="index" :class="property_category_selected == index ? 'cateItem cateActive' : 'cateItem'"
						 @tap="selectCategory(1,index,item.value)">
							{{ item.name }}
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="main">
				<view class="list" v-for="(item, index) in property" :key="index" @tap="go('/pages/house_property/propertiesdetail/propertiesdetail?id=' + item.id)">
					<view class="img">
						<image :src="item.thumb" mode="widthFix"></image>
					</view>
					<view class="price_info">
						<view class="title">{{ item.name }}</view>
						<view class="color_red">{{ item.avg_price }}/m²</view>
					</view>
				</view>
			</view>
		</view>
		<block v-if="ad['4']">
			<view class="adv" v-for="(item, key) in ad['4']" :key="key" @tap="go(item.target)">
				<image :src="item.thumb" mode="widthFix"></image>
			</view>
		</block>
		<view class="pannel">
			<view class="mokuai_header">
				<view class="title">二手房</view>
				<view class="cateContainer">
					<scroll-view class="scrollView" scroll-with-animation scroll-x>
						<view v-for="(item, index) in sh_category" :key="index" :class="sh_category_selected == index ? 'cateItem cateActive' : 'cateItem'"
						 @tap="selectCategory(2,index,item.value)">
							{{ item.name }}
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="main">
				<view class="list" v-for="(item, index) in second_house" :key="index" @tap="go('/pages/house_property/seconddetail/seconddetail?id=' + item.id)">
					<view class="img">
						<image :src="item.thumb" mode="widthFix"></image>
					</view>
					<view class="price_info">
						<view class="title">{{ item.name }}</view>
						<view class="color_red">{{ item.unit_price }}/m²</view>
					</view>
				</view>
			</view>
		</view>
		<block v-if="ad['5']">
			<view class="adv" v-for="(item, key) in ad['5']" :key="key" @tap="go(item.target)">
				<image :src="item.thumb" mode="widthFix"></image>
			</view>
		</block>
		<view class="pannel">
			<view class="mokuai_header">
				<view class="title">房屋出租</view>
				<view class="cateContainer">
					<scroll-view class="scrollView" scroll-with-animation scroll-x>
						<view v-for="(item, index) in renting_category" :key="index" :class="renting_category_selected == index ? 'cateItem cateActive' : 'cateItem'"
						 @tap="selectCategory(3,index,item.value)">
							{{ item.name }}
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="main">
				<view class="list" v-for="(item, index) in renting" :key="index" @tap="go('/pages/house_property/rentingdetail/rentingdetail?id=' + item.id)">
					<view class="img">
						<image :src="item.thumb" mode="widthFix"></image>
					</view>
					<view class="price_info">
						<view class="title">{{ item.name }}</view>
						<view class="color_red">{{ item.rent }}元/月</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/house-nav-bar/house-nav-bar.vue';
	import houseNav from '@/components/house-nav/house-nav.vue';
	export default {
		data() {
			return {
				city: '深圳',
				ad: [],
				property: [],
				second_house: [],
				renting: [],
				shop: [],
				property_category: [],
				renting_category: [],
				sh_category: [],
				renting_category_selected: 0,
				property_category_selected: 0,
				sh_category_selected: 0
			};
		},
		components: {
			navBar,
			houseNav
		},
		onLoad() {
			this.getData();
		},
		methods: {
			getData() {
				this.$request
					.post('/landed/index', {
						data: {
							city: this.city
						}
					})
					.then(res => {
						this.ad = res.data.data.list.ad;
						this.property = res.data.data.list.property;
						this.second_house = res.data.data.list.second_house;
						this.renting = res.data.data.list.renting;
						this.property_category = res.data.data.list.property_category;
						this.renting_category = res.data.data.list.renting_category;
						this.sh_category = res.data.data.list.sh_category;
						let i = 0;
						let j = -1;
						let shop = res.data.data.list.shop;
						let new_shop = [];
						for (i = 0; i < shop.length; i++) {
							if (i % 16 == 0) {
								j++;
								new_shop[j] = [];
							}
							new_shop[j].push(shop[i]);
						}
						this.shop = new_shop;
					})
					.catch(err => {
						console.log(err);
					});
			},
			go(url) {
				uni.navigateTo({
					url: url
				});
			},
			selectCategory(type, index, value) {
				if (type == 1) {
					this.property_category_selected = index;
				} else if (type == 2) {
					this.sh_category_selected = index;
				} else if (type == 3) {
					this.renting_category_selected = index;
				}
				this.go(`/pages/house_property/newhouse/newhouse?type=${type}&category_selected=${value}`);
			}
		}
	};
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
	}

	.banner {
		width: 100%;

		image {
			width: 100%;
		}
	}

	.banner_pinpai {
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		background-color: #fff;
		padding-bottom: 30upx;
		border-bottom: $uni-border-radius-lg;
	}

	.pingpai {
		width: 100%;

		.title {
			width: 100%;
			height: 80upx;
			font-size: $uni-font-size-lg;
			color: $uni-text-color;
			text-align: left;
			line-height: 80upx;
			padding-left: 20upx;
			box-sizing: border-box;
		}

		.pingpai_wiper {
			height: 320upx;

			.banner_pinpai {
				width: 100%;
				height: 320upx;
				overflow: hidden;

				.image {
					float: left;
					width: 25%;
					height: 80upx;
					overflow: hidden;

					image {
						width: 100%;
					}
				}
			}
		}
	}

	.adv {
		width: 100%;

		image {
			width: 100%;
		}
	}

	.pannel {
		width: 100%;

		.main {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20upx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.list {
				width: 48%;
				background-color: #fff;
				padding-bottom: 10upx;
				margin-bottom: 20upx;
				height: auto;

				.img {
					width: 100%;
					height: 200upx;
					position: relative;
					overflow: hidden;

					image {
						width: 100%;
						height: auto;
					}
				}

				.price_info {
					width: 100%;
					font-size: 20upx;
					box-sizing: border-box;
					padding: 10upx 20upx;

					.title {
						width: 100%;
						line-height: 1.5em;
						font-size: 26upx;
						color: #333333;
					}

					.color_red {
						color: #F33632;
						line-height: 1.5em;
						font-size: 26upx;
						margin-top: 10upx;
					}
				}

				.price_info_a {
					width: 100%;
					height: 80upx;
					font-size: 20upx;
					box-sizing: border-box;
					padding: 0 20upx;

					view {
						width: 100%;
						height: 40upx;
						line-height: 40upx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}

	.mokuai_header {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30upx;
		padding-top: 20upx;

		.title {
			line-height: 1.8em;
			padding-left: 24upx;
			font-size: $uni-font-size-lg;
			border-left: 6upx solid #f34b32;
			color: #f34b32;
			font-weight: 700;
		}

		.cateContainer {
			height: 80upx;
			box-sizing: border-box;
			font-size: $uni-font-size-base;

			.scrollView {
				width: 100%;
				height: 100%;
				line-height: 80upx;
				white-space: nowrap;

				.cateItem {
					display: inline-block;
					margin-right: 42upx;
					color: #333;
					font-size: $uni-font-size-lg;


					&:last-child {
						margin: 0;
					}

					&.cateActive {
						color: #F33632;
						border-bottom: 6upx solid #f34b32;
					}
				}
			}
		}
	}
</style>
